<template>
	<view class="">
		<uni-popup ref="changeTechnician">
			<view class="technician-list">
				<view class="top-style">
					<view class="selected-technician">
						<view class="technician-info">
							<view class="choose-bg">
								已选择
							</view>
							<image class="header" src="../../static/logo.png" mode=""></image>
							<view class="user-name">
								asas 0.9m
							</view>
						</view>
					</view>
					<view class="hint-content">
						<view class="title">非常抱歉！</view>
						<view class="info">当前技师正在忙碌中，<br/> 我们为您推荐其她技</view>
						<image class="icon" src="https://qiniu-cdn.maeiyun.com/imgs/massage/buhao.png" mode=""></image>
					</view>
				</view>
				<view class="list-title">
					<view class="lines"></view>
					<view>可选服务人员</view>
				</view>
				<scroll-view  scroll-y enable-flex>
					<view class="technician-lists">
						<view class="technician" v-for="(item,index) in 16" :key="index">
							<image class="technician-img" src="../../static/logo.png" mode=""></image>
							<view class="right-technician-info">
								<view class="user-name">东艾樱</view>
								<view class="age-address">
									<view style="margin-right: 10rpx;">34岁</view>
									<view>河北人</view>
								</view>
								<view class="distance">
									<image :src="$util.imgurl('/imgs/massage/noselelct.png')" mode=""></image>
									<!-- <image :src="$util.imgurl('/imgs/massage/address.png')" mode=""></image> -->
									<view>0.3km</view>
								</view>
							</view>
						</view>
					</view>
					
				</scroll-view>
				<view class="bottom-btn">
					<view class="tuikuan-btn">
						退款
					</view>
					<view class="choose-btn">选择她</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default{
		name:"changeTechnician",
		data(){
			return{
				
			}
		},
		methods:{
			show(){
				this.$refs.changeTechnician.open('center')
			}
		}
	}
</script>

<style lang="scss">
	.technician-list{
		background-color: #fff;
		border-radius: 20rpx;
		width: 90vw;
		margin: 0 auto;
		padding: 30rpx;
		.top-style{
			display: flex;
			align-items: center;
			.selected-technician{
				margin-right: 30rpx;
				.technician-info{
					position: relative;
					top: -60rpx;
					.header{
						width: 176rpx;
						height: 220rpx;
					}
					.choose-bg{
						background: url('https://qiniu-cdn.maeiyun.com/imgs/massage/choose-bg.png')no-repeat;
						background-size: 100% 100%;
						width: 70rpx;
						height: 30rpx;
						position: absolute;
						top: 0;
						left: 0;
					}
					.user-name{
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						font-size: 24rpx;
						color: #fff;
						background-color: rgba(0, 0,0,.6);
						text-align: center;
					}
				}
			}
			.hint-content{
				width: 424rpx;
				height: 160rpx;
				background: #FFF3E4;
				border-radius: 20rpx;
				position: relative;
				padding: 22rpx 28rpx;
				top: -30rpx;
				.title{
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FF8C00;
					margin-bottom: 7rpx;
				}
				.info{
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #884B00;
				}
				.icon{
					width: 82rpx;
					height: 82rpx;
					position: absolute;
					right: 29rpx;
					top: 35rpx;
				}
			}
		}
		.list-title{
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #08090A;
			.lines{
				width: 10rpx;
				height: 30rpx;
				background: linear-gradient(180deg, #F19A02 0%, #E7533F 100%);
				border-radius: 5rpx;
				margin-right: 10rpx;
			}
		}
	}
	//
	.technician-lists{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 22rpx;
		height: 500rpx;
	}
	.technician-select{
		background: rgba(239, 82, 51, 0.1);
		border: 1rpx solid #EF5233;
		
	}
	.technician {
		width: 281rpx;
		height: 139rpx;
		box-sizing: border-box;
		padding: 20rpx;
		display: flex;
		align-items: center;
		border-radius: 14rpx;
		margin-bottom: 20rpx;
		background-color: #F5F6F7;
		.technician-img {
			width: 80rpx;
			height: 100rpx;
			flex: 0 0 auto;
		}
		.select-color{
			color: #EF5233;
		}
		.right-technician-info {
			flex: 0 0 auto;
			margin-left: 20rpx;
			color: #8B8D8D;
			.user-name {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			
			.age-address {
				display: flex;
				align-items: center;
				margin: 10rpx 0;
				view {
					background-color: #E4E5E6;
					color: #8B8D8D;
					height: 26rpx;
					border-radius: 6rpx;
					padding: 0 8rpx;
					font-size: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					line-height: 26rpx;
	
				}
				.select-box{
					background: rgba(239, 82, 51, 0.2);
					color: #EF5233;
				}
				
			}
	
			.distance {
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #8B8D8D;
				display: flex;
				align-items: center;
	
				image {
					width: 13rpx;
					height: 16rpx;
				}
			}
	
		}
	}
	.bottom-btn{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 104rpx;
		.tuikuan-btn{
			width: 240rpx;
			height: 88rpx;
			background: #F5F6F7;
			border-radius: 44rpx;
			font-size: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #8B8D8D;
			text-align: center;
			line-height: 88rpx;
		}
		.choose-btn{
			width: 358rpx;
			height: 88rpx;
			background: #EF5233;
			border-radius: 44rpx;
			font-size: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
		}
		
	}
</style>